<template>
  <n-drawer v-model:show="isDrawer" width="1000" :auto-focus="false" @after-leave="handleReset">
    <n-drawer-content title="方案管理" closable>
      <n-form
        :model="formParams"
        :rules="rules"
        ref="formRef"
        label-placement="left"
        :label-width="100"
      >
        <n-form-item label="方案名称" path="title">
          <n-input placeholder="请输入方案名称" v-model:value="formParams.title" />
        </n-form-item>
        <n-form-item label="价格类别">
          <n-grid :x-gap="12" :y-gap="4" :cols="3">
            <n-grid-item>
              <div class="list">
                <span>类别名称</span><n-input value="尖" disabled class="input"/>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="listts">
                <span>电费</span><n-input placeholder="0.00" v-model:value="formParams.powerj" @input="change(0)" class="input"/><span>元</span>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="listts">
                <span>服务费</span><n-input placeholder="0.00" v-model:value="formParams.servicej"  @input="change(0)" class="input" /><span>元</span>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="list">
                <span>类别名称</span><n-input value="峰" disabled class="input"/>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="listts">
                <span>电费</span><n-input placeholder="0.00" v-model:value="formParams.powerf" @input="change(1)" class="input" /><span>元</span>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="listts">
                <span>服务费</span><n-input placeholder="0.00" v-model:value="formParams.servicef"  @input="change(1)" class="input" /><span>元</span>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="list">
                <span>类别名称</span><n-input  value="平" disabled class="input"/>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="listts">
                <span>电费</span><n-input placeholder="0.00" v-model:value="formParams.powerp" @input="change(2)" class="input" /><span>元</span>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="listts">
                <span>服务费</span><n-input placeholder="0.00" v-model:value="formParams.servicep"  @input="change(2)" class="input" /><span>元</span>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="list">
                <span>类别名称</span><n-input  value="谷" disabled class="input"/>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="listts">
                <span>电费</span><n-input placeholder="0.00" v-model:value="formParams.powerg" @input="change(3)" class="input" /><span>元</span>
              </div>
            </n-grid-item>
            <n-grid-item>
              <div class="listts">
                <span>服务费</span><n-input placeholder="0.00" v-model:value="formParams.serviceg"  @input="change(3)" class="input" /><span>元</span>
              </div>
            </n-grid-item>
          </n-grid>
        </n-form-item>
        <n-card title="价格时区">
          <div class="liebieo" v-for="(item,index) in List" :key="index">
            <i class="del" @click="remove(index)">删除</i>
            <n-select placeholder="请选择时间" v-model:value="item.values" @update:value="handleUpdateValue" :options="options" clearable class="select" />
            <b class="b">至</b>
            <n-select placeholder="请选择时间" v-model:value="item.valuee" @update:value="handleUpdateValue" :options="options" clearable class="select" />
            <n-select placeholder="请选择" v-model:value="item.leibie" :options="optionsleibie" class="liebie" />
          </div>
          <div class="other">
            <n-input type="text" value="其他时段统一价格" disabled class="input" />
            <n-select placeholder="请选择" v-model:value="formParams.other" :options="optionsleibie" class="xuanze" />
          </div>
          <n-button type="info" @click="add">添加时间区间</n-button>
        </n-card>
      </n-form>
      <template #footer>
        <n-space>
          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useMessage, FormRules } from 'naive-ui';
  import { cashInfo,cashEdit } from '@/api/financial/index';
import internal from 'stream';

  const rules: FormRules = {
    title: {
      required: true,
      message: '方案名称不能为空',
      trigger: 'blur',
    }
  };

  const defaultValueRef = () => ({
    id: null,
    title: '',
    powerj: '',
    servicej: '',
    powerf: '',
    servicef: '',
    powerp: '',
    servicep: '',
    powerg: '',
    serviceg: '',
    leibie: null,
    other: null,//其他时段价格
  });

  const message = useMessage();
  const formRef: any = ref(null);
  const isDrawer = ref(false);
  const subLoading = ref(false);
  const formParams = ref(defaultValueRef());
  const emit = defineEmits(['change']);
  const List = ref([{
    values: '',
    valuee: '',
    leibie: null,
  }]);

  const options = ref([{}])//时间区间

  //类别值
  const optionsleibie = ref([
    {
      label: "尖: 电费 【元】 服务费 【元】",
      value: 1,
    },{
      label: "峰: 电费 【元】 服务费 【元】",
      value: 2,
    },{
      label: "平: 电费 【元】 服务费 【元】",
      value: 3,
    },{
      label: "谷: 电费 【元】 服务费 【元】",
      value: 4,
    },
  ])

  function change(e){
    if(e == 0){
      optionsleibie.value[e].label = "尖: 电费【" + formParams.value.powerj + "元】 服务费【" + formParams.value.servicej + "元】";
    } else if(e == 1){
      optionsleibie.value[e].label = "峰: 电费【" + formParams.value.powerf + "元】 服务费【" + formParams.value.servicef + "元】";
    } else if(e == 2){
      optionsleibie.value[e].label = "平: 电费【" + formParams.value.powerp + "元】 服务费【" + formParams.value.servicep + "元】";
    } else if(e == 3){
      optionsleibie.value[e].label = "谷: 电费【" + formParams.value.powerg + "元】 服务费【" + formParams.value.serviceg + "元】";
    }
  }

  //新增详情
  function add(){
    List.value.push({
      values: '',
      valuee: '',
      leibie: null,
    });
  }
  //移除详情
  function remove(index){
    if(List.value.length > 1){
      List.value.splice(index, 1);
    }
  }

  function addoptions(value){
    console.log(value);
    options.value = [];
    for(var j=0;j<=24;j++){
      if(options.value.length < value){
        if(j == 24){
          options.value.push({
            label: j + ':00',
            value: 2*j,
            disabled : true
          })
        }else{
          options.value.push({
            label: j + ':00',
            value: 2*j,
            disabled : true
          })
          options.value.push({
            label: j + ':30',
            value: j*2+1,
            disabled : true
          })
        }
      }else{
        if(j == 24){
          options.value.push({
            label: j + ':00',
            value: 2*j,
          })
        }else{
          options.value.push({
            label: j + ':00',
            value: 2*j,
          })
          options.value.push({
            label: j + ':30',
            value: j*2+1,
          })
        }
      }
    }
    console.log(options.value);
  }

  function handleUpdateValue(value: internal){
    addoptions(value)
    // console.log(value)
  }

  async function openDrawer(id?) {
    addoptions('kong');//调取options值
    if (id) {
      formParams.value.id = id;
      getInfo();
      return;
    }
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        const msg = formParams.value.id ? '编辑成功' : '添加成功';
        if (formParams.value.id) {
          cashEdit(formParams.value).then((_) => {
            message.success(msg);
            emit('change');
            handleReset();
            closeDrawer();
          });
        }
      } else {
        message.error('请填写完整信息');
      }
    });
  }

  function handleReset() {
    formRef.value.restoreValidation();
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  function getInfo() {
    cashInfo({ id: formParams.value.id }).then((res) => {
      const params = {
        id: formParams.value.id,
        title: res.title,
      };
      formParams.value = Object.assign(formParams.value, params);
      isDrawer.value = true;
    });
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
<style scoped>
  .list{
    color: #c0c4cc;
    cursor: not-allowed;
    height: 34px;
    line-height: 34px;
    margin-bottom: 10px;
  }
  .list span{
    float: left;
    width: 36%;
    text-align: center;
    border: 1px solid #dfe4ed;
    background-color: #f5f7fa;
  }

  .list .input{
    float: left;
    width: 56%;
    padding-left: 6%;
    border: 1px solid #dfe4ed;
    background-color: #f5f7fa;
    border-left: none;
  }

  .listts{
    color: #c0c4cc;
    cursor: not-allowed;
    height: 34px;
    line-height: 34px;
  }
  .listts span:nth-of-type(1){
    float: left;
    width: 24%;
    text-align: center;
    border: 1px solid #dfe4ed;
    background-color: #f5f7fa;
  }

  .listts .input{
    float: left;
    width: 47%;
    padding-left: 4%;
    border: 1px solid #dfe4ed;
    border-left: none;
    border-right: none;
  }

  .listts span:nth-of-type(2){
    float: left;
    width: 24%;
    text-align: center;
    border: 1px solid #dfe4ed;
    background-color: #f5f7fa;
  }

  .liebieo{
    width: 100%;
    height: 70px;
    display: block;
  }

  .liebieo .del{
    float: left;
    font-style: normal;
    height: 34px;
    line-height: 34px;
    width: 50px;
    text-align: center;
    cursor: pointer;
  }

  .liebieo .b{
    float: left;
    height: 34px;
    line-height: 34px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .liebieo .select{
    float: left;
    width: 200px;
  }

  .liebieo .liebie{
    float: left;
    width: 280px;
    margin-left: 20px;
  }

  .other{
    width: 100%;
    height: 70px;
    display: block;
  }

  .other .input{
    float: left;
    width: 160px;
  }

  .other .xuanze{
    float: left;
    width: 300px;
    margin-left: 30px
  }
</style>
